<script>
import MainPageCard1 from "@/pages/page_components/sqx/MainPageCard1.vue";
import MainPageCard2 from "@/pages/page_components/sqx/MainPageCard2.vue";
export default {
  components:{
    MainPageCard1,
    MainPageCard2
  },
  data() {
    return {

    };
  },
  mounted() {
    //添加鼠标移动事件监听器
    document.addEventListener("mousemove", this.parallax);
  },
  methods: {
    //鼠标移动动画
    addParallaxEventListener() {
      document.addEventListener("mousemove", this.parallax);
    },
    //函数用于处理鼠标移动
    parallax(e) {
      const layers = this.$el.querySelectorAll('.custom_card');
      const speed = 0.04; //速度
      const x = (window.innerWidth - e.pageX) * speed;
      const y = (window.innerHeight - e.pageY) * speed;
      layers.forEach(layer => {
        layer.style.transform = `translate(${x}px, ${y}px)`;
      });
    },
    //点击后页面跳转
    pageJumpTo(pagePath){
      //使用Vue Router进行页面跳转
      this.$router.push(pagePath);
    },
  },
};
</script>

<template>
  <div>
    <!--背景-->
    <div class="background-container">
      <!-- 一系列卡片组件 -->
      <!-- 每个卡片组件都传递了一些属性，如角色(character)、图片(img)、模式(mode)和背景颜色(b-color) -->
      <!-- 这些属性将用于渲染卡片内容 -->
      <MainPageCard1 class="custom_card infp" :character="'INFP'" :img="require('@/assets/main_page/sqx/infp.png')" :mode=2 :b-color="'#4bc0a3'"/>
      <MainPageCard1 class="custom_card entp" :character="'ENTP'" :img="require('@/assets/main_page/sqx/entp.png')" :mode=2  :b-color="'#8383d3'"/>
      <MainPageCard1 class="custom_card estp" :character="'ESTP'" :img="require('@/assets/main_page/sqx/estp.png')" :mode=1  :b-color="'#d3b17d'"/>
      <MainPageCard1 class="custom_card esfj" :character="'ESFJ'" :img="require('@/assets/main_page/sqx/esfj.png')" :mode=1  :b-color="'#589fce'"/>
      <MainPageCard1 class="custom_card istp" :character="'ISTP'" :img="require('@/assets/main_page/sqx/istp.png')" :mode=2  :b-color="'#d3b17d'"/>
      <MainPageCard1 class="custom_card isfp" :character="'ISFP'" :img="require('@/assets/main_page/sqx/isfp.png')" :mode=1  :b-color="'#d3b17d'"/>
      <MainPageCard1 class="custom_card enfj" :character="'ENFJ'" :img="require('@/assets/main_page/sqx/enfj.png')" :mode=2 :b-color="'#4bc0a3'"/>
      <MainPageCard1 class="custom_card estj" :character="'ESTJ'" :img="require('@/assets/main_page/sqx/estj.png')" :mode=2  :b-color="'#589fce'"/>
      <MainPageCard1 class="custom_card intj" :character="'INTJ'" :img="require('@/assets/main_page/sqx/intj.png')" :mode=1  :b-color="'#8383d3'"/>
      <MainPageCard1 class="custom_card entj" :character="'ENTJ'" :img="require('@/assets/main_page/sqx/entj.png')" :mode=2  :b-color="'#8383d3'"/>
      <MainPageCard2 class="custom_card infj" :character="'INFJ'" :img="require('@/assets/main_page/sqx/infj.png')" :b-color="'#4bc0a3'" />
      <MainPageCard2 class="custom_card esfp" :character="'ESFP'" :img="require('@/assets/main_page/sqx/esfp.png')" :b-color="'#d3b17d'" />
      <MainPageCard2 class="custom_card enfp" :character="'ENFP'" :img="require('@/assets/main_page/sqx/enfp.png')" :b-color="'#4bc0a3'" />
      <MainPageCard2 class="custom_card isfj" :character="'ISFJ'" :img="require('@/assets/main_page/sqx/isfj.png')" :b-color="'#589fce'" />
      <MainPageCard2 class="custom_card intp" :character="'INTP'" :img="require('@/assets/main_page/sqx/intp.png')" :b-color="'#8383d3'" />
      <MainPageCard2 class="custom_card istj" :character="'ISTJ'" :img="require('@/assets/main_page/sqx/istj.png')" :b-color="'#589fce'" />
      <div class="background-back"></div>
    </div>
    <!--前置-->
    <div class="front_container">
      <!-- 标题和作者信息 -->
      <div class="title_container custom_card">
        <img src="@/assets/main_page/sqx/title.png" alt="null">
        <img src="@/assets/main_page/sqx/author.png" alt="null">
      </div>
<!--      按钮-->
      <!-- 点击按钮时，调用pageJumpTo方法进行页面跳转 -->
      <div class="btn_container custom_card">
        <div @click="pageJumpTo('/characKnowl')" class="btn_h">
          <img src="@/assets/main_page/sqx/but11.png" alt="null">
          <img src="@/assets/main_page/sqx/btn12.png" alt="null">
        </div>
        <div @click="pageJumpTo('/testGpt')" class="btn_h">
          <img src="@/assets/main_page/sqx/but21.png" alt="null">
          <img src="@/assets/main_page/sqx/btn22.png" alt="null">
        </div>
      </div>
<!--      鼠标-->
      <!-- 鼠标跟随效果 -->
      <img class="fly" src="@/assets/main_page/sqx/mouse.png" alt="null">
    </div>
  </div>
</template>

<style scoped>
  @import "../styles/sqx/main_charac_pos.css";
  .custom_card{
    position: fixed;
  }
  .background-container{
    background: linear-gradient(#5d89c2, #4d5eaf);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }
  .background-back{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.2);
  }
  .front_container{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .front_container .title_container{
    width: 600px;
    position: absolute;
    left: calc(49% - 300px);
    top: calc(36% - 80px);
    height: 160px;
  }
  .title_container img:nth-child(1){
    position: absolute;
    left: 0;
    top: 0;
    width: 600px;
    animation: qAni 1 2.4s;
  }
  @keyframes qAni { //标题动画的关键帧
    0%{
      transform: scaleX(1);
      top: -50%;
      opacity: 0.3;
    }
    20%{
      transform: scaleX(1);
    }
    45%{
      transform: scaleX(1.2);
    }
    80%{
      opacity: 1;
      transform: scaleX(1);
    }
    100%{
      transform: scaleX(1);
      top: 0;
      opacity: 1;
    }
  }
  .title_container img:nth-child(2){
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400px;
    transform: rotateZ(-8deg) translateX(30%);
    animation: authorAni 2.4s 1;
  }
  @keyframes authorAni { //作者信息的动画关键帧
    0%, 30%{
      opacity: 0;
      transform: rotateZ(-4deg) translateX(30%);
    }
    50%{
      transform: rotateZ(-14deg) translateX(30%);
    }
    100%{
      opacity: 1;
      transform: rotateZ(-8deg) translateX(30%);
    }
  }
  .btn_container{
    position: fixed;
    width: 500px;
    height: 140px;
    left: calc(50% - 250px);
    top: calc(36% + 160px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .btn_h{
    height: 30%;
    width: 100%;
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
  }
  .btn_h:nth-child(1){
    animation: leftInAni 1 5s;
    animation-delay: -2s;
  }
  .btn_h:nth-child(2){
    animation: leftInAni 1 5s;
    animation-delay: -1.6s;
  }
  @keyframes leftInAni {
    0%{
      opacity: 0;
      transform: translateX(-100%);
    }
    66%{
      opacity: 0;
      transform: translateX(-100%);
    }
    100%{
      opacity: 1;
      transform: translateX(0);
    }
  }
  .btn_h img:nth-child(1){
    height: 100%;
    transform-origin: left bottom;
    transition: transform 0.5s;
  }
  .btn_h:hover img:nth-child(1){
    transform: rotate(-15deg);
  }
  .btn_h img:nth-child(2){
    position: absolute;
    height: 60%;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: transform 0.8s, opacity 0.8s;
  }
  .btn_h:hover img:nth-child(2){
    transform: translateX(40%);
    opacity: 1;
  }
  .fly{
    width: 214px;
    position: fixed;
    top: 20%;
    left: -300px;
    animation: flyAni 68s infinite linear;
    animation-delay: 20s;
  }
  @keyframes flyAni {
    0%{
      top: 20%;
      left: -300px;
      transform: rotateY(180deg);
    }
    10%{
      top: -10%;
      left: 100%;
      transform: rotateY(180deg);
    }
    50%{
      top: 60%;
      left: 100%;
      transform: rotateY(0);
    }
    60%{
      top: 40%;
      left: -300px;
      transform: rotateY(0);
    }
  }

</style>